<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 顶部卡片 - 添加按钮 -->
      <el-card class="box-card titleCard">
        <!-- 由于顶部的添加按钮默认添加的是一级菜单的页面权限, 所以 type值默认传递为 1 -->
        <el-button plain type="primary" round size="medium" @click="openDialog(1, '0', 'add')">新增权限</el-button>
      </el-card>

      <el-card class="box-card">
        <!-- 表格组件 - 用户权限表格 -->
        <el-table
          row-key="id"
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="name"
            label="名称"
            width="180"
          />
          <el-table-column
            prop="code"
            label="标识"
            width="180"
          />
          <el-table-column
            prop="description"
            label="描述"
          />
          <el-table-column
            label="操作"
            width="215"
          >
            <!-- 判断： 如果当前是二级菜单, 就隐藏添加按钮 -->
            <!-- 如果是一级菜单, 那么久显示添加按钮 -->
            <template slot-scope="scoped">
              <el-button
                v-if="scoped.row.type === 1"
                type="primary"
                size="mini"
                plain
                @click="openDialog(2, scoped.row.id, 'add')"
              >添加</el-button>
              <el-button
                type="success"
                size="mini"
                plain
                @click="openDialog(scoped.row.type, scoped.row.id, 'edit')"
              >编辑</el-button>
              <!-- 判断: 如果当前是一级菜单, 就隐藏删除按钮 -->
              <el-button
                v-if="scoped.row.children.length === 0"
                type="warning"
                size="mini"
                plain
                @click="deletePermision(scoped.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 添加 / 编辑表单 模态框 -->
      <!-- 三种默认关闭模态框方法: 禁用 -->
      <el-dialog
        :title="isEdit ? '编辑权限' : '新增权限'"
        :visible.sync="dialogVisible"
        width="50%"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-form ref="formRef" :model="formData" label-width="80px">
          <el-form-item label="权限名称">
            <el-input v-model="formData.name" />
          </el-form-item>
          <el-form-item label="权限标识">
            <el-input v-model="formData.code" />
          </el-form-item>
          <el-form-item label="权限描述">
            <el-input v-model="formData.description" />
          </el-form-item>
          <el-form-item label="是否启用" prop="enVisible">
            <el-switch
              v-model="formData.enVisible"
              active-text="启用"
              inactive-text="不启用"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="2"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="onSubmit">{{ isEdit ? '立即编辑' : '立即创建' }}</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getPermissionRequest, getPermissionByIdRequest, addPermissionRequest, deltetPermissionByIdRequest, updatePermissionByIdRequest } from '@/api/permission'
import { transformListToTree2 } from '@/utils'
export default {
  data() {
    return {
      // 表格数据初始化
      tableData: [],
      // 控制模态框显示隐藏
      dialogVisible: false,
      // 判断是否为编辑
      isEdit: false,
      // 模态框表单数据初始化
      formData: {
        name: '',
        code: '',
        description: '',
        enVisible: '',
        type: '',
        pid: ''
      }
    }
  },
  created() {
    this.getPermission() // 渲染页面
  },
  methods: {
    // ^ ==================== 请求 ====================
    // 请求 - 获取所有权限点
    async getPermission() {
      try {
        const res = await getPermissionRequest()
        if (res.success) {
          // 利用递归实现平面数据转换为树形结构
          // 需要传递两个参数: 参数一: 平铺数据, 参数二: 一级菜单 pid
          this.tableData = transformListToTree2(res.data, '0')
        } else {
          console.log('获取所有权限点失败!')
        }
      } catch (error) {
        console.log('获取所有权限点失败!', error)
      }
    },
    // 请求 - 根据 id 获取权限点详情
    async getPermissionById(id) {
      try {
        const res = await getPermissionByIdRequest(id)
        if (res.success) {
          this.formData = res.data // 数据回显
        } else {
          this.$message.error(res.message || '获取权限点详情失败')
        }
      } catch (error) {
        console.log('获取权限点详情失败', error)
      }
    },
    // 请求 - 添加权限点
    async addPermission() {
      try {
        const res = await addPermissionRequest(this.formData)
        try {
          if (res.success) {
            this.$message.success('添加权限点成功')
            this.success()
          }
        } catch (error) {
          this.$message.error(res.message || '添加权限点失败')
        }
      } catch (error) {
        console.log('添加权限点失败', error)
      }
    },
    // 请求 - 根据 id 删除权限点
    async deltetPermissionById(id) {
      try {
        const res = await deltetPermissionByIdRequest(id)
        if (res.success) {
          this.$message.success('删除权限点成功!')
          this.getPermission() // 重新渲染页面
        } else {
          this.$message(res.message || '删除权限点失败!')
        }
      } catch (error) {
        console.log('删除权限点失败', error)
      }
    },
    // 请求 - 根据 ID 更新权限点
    async updatePermissionById() {
      try {
        const res = await updatePermissionByIdRequest(this.formData)
        if (res.success) {
          this.formData = res.data
          this.success() // 请求成功调用success函数
          this.$message.success('更新权限点成功')
        } else {
          this.$message.error(res.message || '更新权限点失败!')
        }
      } catch (error) {
        console.log('更新权限点失败', error)
      }
    },

    // ^ ==================== 事件 ====================
    // 事件 - 提交按钮 (创建/编辑)
    onSubmit() {
      if (this.isEdit === false) {
        this.addPermission() // 添加权限
      } else {
        this.updatePermissionById() // 编辑/更新权限点
      }
    },
    // 事件 - 开启弹窗 (添加/编辑)
    openDialog(type, id, editOrAdd) {
      if (editOrAdd === 'add') {
        this.isEdit = false
      } else {
        this.isEdit = true
        this.getPermissionById(id) // 发送请求数据回显
      }
      this.dialogVisible = true
      this.formData.type = type
      this.formData.pid = id
    },
    // 事件 - 删除按钮
    deletePermision(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deltetPermissionById(id)
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 操作成功, 渲染页面, 关闭模态框
    success() {
      this.dialogVisible = false
      this.getPermission()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card.titleCard {
  margin-bottom: 15px !important;
  text-align: right !important;
}
</style>
